<template>
	<!-- 递归实现菜单 -->
	<template v-for="(item, index) in props.menuData">
		<el-menu-item @click="handleClick(item, `${props.index}-${item.meta.id}`)"
			v-if="!item.children || item.children.length == 0" :index="`${props.index}-${item.meta.id}`"
			:key="`${props.index}-${item.meta.id}`">
			<el-icon size="20">
				<component :is="item.meta.icon"></component>
			</el-icon>
			<span>{{ item.meta.name }}</span>
		</el-menu-item>
		<!-- 有子菜单的情况 -->
		<el-sub-menu v-else :index="`${props.index}-${item.meta.id}`">
			<template #title>
				<!-- 图标 -->
				<el-icon size="20">
					<component :is="item.meta.icon"></component>
				</el-icon>
				<!-- 名称 -->
				<span>{{ item.meta.name }}</span>
			</template>
			<tree-menu :index="`${props.index}-${item.meta.id}`" :menuData="item.children" />
		</el-sub-menu>
	</template>
</template>

<script setup>

import { useRouter } from 'vue-router';
import { useStore } from 'vuex';
import { Location } from '@element-plus/icons-vue';

const router = useRouter();
const store = useStore();
const props = defineProps(['menuData', 'index']);

const handleClick = (item, active) => {
	store.commit('addMenu', item.meta);
	store.commit('updateMenuActive', active);
	router.push(item.meta.path);
};

</script>

<style scoped></style>